    @charset "utf-8";
    @import 'reset';
    $fontSize:40;
    @function r($p) {
        @return $p/$fontSize*1rem;
    }
    html{
        font-size: $fontSize;
        width: 100%;
        height: 100%;
    }
    body{
        font-size: 16px;
        width: 100%;
        height: 100%;
    }
    .webWarp{
        width: 100%;
        position: relative;
        height: 100%;
    }
    .web {
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        top: 0;
        bottom:0;
        padding-bottom: r(100);
        overflow: auto;
        header {
            width: r(640);
            .top {
                width: r(640);
                border-bottom:1px solid #7F7F7F ;
                padding-top: r(28);
                padding-bottom: r(21);
                p{
                    width: r(640);
                    text-align: center;
                    font-size: r(30);
                    color: #343434;
                }
            }
        }
        .container {
            width: r(640);
            input{
                display: none;
            }
            #onclicka:checked+label>.drop_down>.img img{
                transform: rotate(90deg);
            }
            #onclickb:checked+label>.drop_down>.img img{
                transform: rotate(90deg);
            }
            #onclickb:checked~.mess_wrap{
                height:r(300);
//              overflow: auto;
            }
            
            .mess_wrap{
                width: r(640);
                height: 0;
                overflow: hidden;
                transition: all .5s;
            }
            .drop_down{
                width: r(640);
                padding: 0 r(30);
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid #ececec;
                .d_left{
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    padding: r(32) 0;
                    img{
                        height: r(33);
                    }
                    p{
                        padding-right: r(20);
                        padding-left: r(25);
                        font-size: r(22);
                        color: #343434;
                    }
                    span{
                        color: #A3A3A3;
                        font-size: r(22);
                    }
                }
                .img{
                    img{
                        height: r(24);
                    }
                }
            }
            .message_auto{
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                overflow: auto;
            }
            .message{
                width:100%;
                padding: 0 r(30);
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid #ececec;
                .mess_left{
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    padding: r(32) 0;
                    >img{
                        width: r(86);
                    }
                    .name{
                        width: r(300);
                        display: flex;
                        justify-content:flex-start;
                        flex-wrap: wrap;
                        padding-left: r(25);
                        p{
                            padding-bottom: r(18);
                            span{
                                display: inline-block;
                                font-size: r(22);
                                color: #343434;
//                              line-height: r(23);
                                vertical-align: middle;
                                padding-right: r(5);
                                .num{
                                    margin-left: r(10);
                                    padding:r(1) r(2);
                                    background: #e60012;
                                    color: #FFFFFF;
                                    border-radius:50%;
                                    font-size: r(12);
                                    text-align: center;
                                    vertical-align: top;
                        }
                            }
                            img{
                                width: r(14);
                                vertical-align: middle;
                            }
                        }
                        
                        >span{
                            font-size: r(20);
                            color: #A3A3A3;
                        }
                        >.text{
                            font-size: r(20);
                            color: #A3A3A3;
                            width: r(200);
                            display: inline-block;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                    }
                }
                .time{
                    font-size: r(20);
                    color: #A3A3A3;
                    padding-bottom: r(30);
                    padding-left: r(100);
                    white-space: nowrap;
                }
            }
            #del:checked+.message_auto{
                display: none;
            }
            #dela:checked+.message_auto{
                display: none;
            }
            .time_tt{
//                   width: r(240);
                     height: r(151);
                     padding-left: r(20);
                    ul{
//                      width: r(240);
                        height: r(151);
                        display: flex;
                        justify-content: space-between;
                        li{
                            cursor: pointer;
                            width: r(120);
                            height: r(151);
                            line-height: r(151);
                            font-size: r(24);
                            text-align: center;
                            color: #FFFFFF;
                            background: #e60012;
                        }
                    }
                }
            .line{
                border: none;
            }
            .system_mess{
                width: r(640);
                height: r(56);
                background: #F2F2F2;
                p{
                    font-size: r(24);
                    color:#9b9b9b;
                    line-height: r(56);
                    padding-left: r(28);
                }
            }
            .drop_down_t{
                width: r(640);
                padding: 0 r(30);
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid #ececec;
                .d_left{
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    padding: r(32) 0;
                    img{
                        width: r(33);
                    }
                    p{
                        padding-right: r(20);
                        padding-left: r(25);
                        font-size: r(22);
                        color: #343434;
                    }
                    span{
                        color: #A3A3A3;
                        font-size: r(22);
                    }
                }
                .img{
                    img{
                        height: r(24);
                    }
                }
            }
            .message_t{
                width: r(640);
                padding-left:r(30);
                display: flex;
                justify-content: flex-start;
                align-items: center;
                border-bottom: 1px solid #ececec;
                overflow: auto;
                .mess_left{
                    width: 100%;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    padding-right: r(310);
                    >img{
                        width: r(51);
                    }
                    .name{
                        display: flex;
                        justify-content:flex-start;
                        flex-wrap: wrap;
                        padding-left: r(25);
                        p{
                            padding-bottom: r(11);
                            line-height: r(20);
                            span{
                                display: inline-block;
                                font-size: r(20);
                                
                                color: #343434;
                                vertical-align: middle;
                                padding-right: r(5);
                            }
                            img{
                                width: r(14);
                                vertical-align: middle;
                            }
                        }
                        
                        >span{
                            font-size: r(20);
                            color: #A3A3A3;
                        }
                        >.text{
                            font-size: r(12);
                            color: #A3A3A3;
                            width: r(400);
                            display: inline-block;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                    }
                }
                .time{
                        width: r(240);
                        height: r(100);
                    ul{
                        width: r(240);
                        height: r(100);
                        display: flex;
                        justify-content: space-between;
                        a{
                            display: inline-block;
                            color: #FFFFFF;
                        }
                        li{
                            width: r(120);
                            height: r(100);
                            line-height: r(100);
                            font-size: r(24);
                            text-align: center;
                        }
                        a:first-of-type{
                            background: #CCCCCC;
                        }
                        a:last-of-type{
                            background: #7F7F7F;
                        }
                    }
                }
            }
            
        
        }
    }
footer{
        width: 100%;
    .foot_nav{
        width: r(640);
        height: r(100);
        background: rgba(255,255,255,1);
        position: absolute;
        left:50%;
        bottom:0;
        transform: translate(-50%);
        ul{
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            li{
                display: flex;
                align-items: flex-end;
                a{
                    display: flex;
                    align-items: flex-end;  
                }
                img{
                    width:r(60);
                }
                .logo{
                    width: r(97);
                }
            }
            
            
        }
    }
}